<?php

namespace App\Admin\Controllers;

use App\Http\Controllers\Controller;
use App\NaiveUI\Chart;
use LowCode\Block;
use LowCode\Page;
use LowCode\Support\JsLibs;
use LowCode\UI;

class DashboardController extends Controller
{
    public function analytics()
    {
        $block = Block::make("AnalyticsBlock", function (Block $block){
            $block->nodes([
                Chart::example()
            ]);
        });
        $page = Page::make($block);
        return $this->result($page);
    }

    public function workspace()
    {
        $block = Block::make("WorkspaceBlock", function (Block $block){
            $block->inject("userInfo",jsExp(JsLibs::getUserInfo()));
            $block->state("avatar", "https://unpkg.com/@vbenjs/static-source@0.1.6/source/avatar-v1.webp");
            $block->mounted("()=>{console.log('挂载完成',this);}");
            $items = [
                [
                    'color'=>'','content'=>'不要等待机会，而要创造机会。',
                    'date'=>'2021-04-01','group'=>'开源组',
                    'icon'=>'carbon:logo-github','title'=>'Github'
                ],
                [
                    'color'=>'#3fb27f','content'=>'现在的你决定将来的你。',
                    'date'=>'2021-04-01','group'=>'算法组',
                    'icon'=>'ion:logo-vue','title'=>'Vue'
                ],
                [
                    'color'=>'#e18525','content'=>'没有什么才能比努力更重要。',
                    'date'=>'2021-04-01','group'=>'上班摸鱼',
                    'icon'=>'ion:logo-html5','title'=>'Html5'
                ],
                [
                    'color'=>'#bf0c2c','content'=>'热情和欲望可以突破一切难关。',
                    'date'=>'2021-04-01','group'=>'UI',
                    'icon'=>'ion:logo-angular','title'=>'Angular'
                ],
                [
                    'color'=>'#00d8ff','content'=>'健康的身体是实现目标的基石。',
                    'date'=>'2021-04-01','group'=>'技术牛',
                    'icon'=>'bx:bxl-react','title'=>'React'
                ],
                [
                    'color'=>'#EBD94E','content'=>'路是走出来的，而不是空想出来的。',
                    'date'=>'2021-04-01','group'=>'架构组',
                    'icon'=>'ion:logo-javascript','title'=>'Js'
                ]
            ];
            $block->state("items",$items);

            $className = jsExp("[
            'border-border group w-full cursor-pointer border-b border-r border-t p-4 transition-all hover:shadow-xl md:w-1/2 lg:w-1/3',
            {
                'border-r-0': index % 3 === 2,
                'border-b-0': index < 3,
                'pb-4': index > 2,
            }]");
            $project = UI::card("项目",UI::flex([
                UI::div([
                    UI::div([
                        UI::svgIcon(jsExp("item.icon"))->color(jsExp("item.color"))->size(32)->class("transition-all duration-300 group-hover:scale-110"),
                        UI::span(jsExp("item.title"))->class("ml-4 text-lg font-medium")
                    ])->class("flex items-center"),
                    UI::div(jsExp("item.content"))->class("text-foreground/80 mt-4 flex h-10"),
                    UI::div([
                        UI::span(jsExp("item.group")),
                        UI::span(jsExp("item.date")),
                    ])->class("text-foreground/80 flex justify-between"),
                ])->class($className)->vFor("state.items")
            ])->wrap()->style("gap","0"));
            $block->state("newList",[
                [
                    "avatar"=>"svg:avatar-1","date"=>"刚刚","title"=>"威廉",
                    "content"=>"在 <a>开源组</a> 创建了项目 <a>Vue</a>",
                ],
                [
                    "avatar"=>"svg:avatar-2","date"=>"1个小时前","title"=>"艾文",
                    "content"=>"关注了 <a>威廉</a>",
                ],
                [
                    "avatar"=>"svg:avatar-3","date"=>"1天前","title"=>"克里斯",
                    "content"=>"发布了 <a>个人动态</a>",
                ],
                [
                    "avatar"=>"svg:avatar-4", "date"=>"2天前","title"=>"Vben",
                    "content"=>"发表文章 <a>如何编写一个Vite插件</a>",
                ],
                [
                    "avatar"=>"svg:avatar-1","date"=>"3天前","title"=>"皮特",
                    "content"=>"回复了 <a>杰克</a> 的问题 <a>如何进行项目优化？</a>",
                ],
                [
                    "avatar"=>"svg:avatar-2","date"=>"1周前","title"=>"杰克",
                    "content"=>"关闭了问题 <a>如何运行项目</a>",
                ],
                [
                    "avatar"=>"svg:avatar-3","date"=>"1周前","title"=>"威廉",
                    "content"=>"发布了 <a>个人动态</a>",
                ],
                [
                    "avatar"=>"svg:avatar-4","date"=>"2021-04-01 20:00","title"=>"威廉",
                    "content"=>"推送了代码到 <a>Github</a>",
                ],
                [
                    "avatar"=>"svg:avatar-4","date"=>"2021-03-01 20:00","title"=>"Vben",
                    "content"=>"发表文章 <a>如何编写使用 Admin Vben</a>",
                ]
            ]);
            $slotPrefix = UI::svgIcon(jsExp("item.avatar"))->size(40)->class("rounded-full");
            $date = UI::span(jsExp("item.date"))->class("text-foreground/80 mt-6 text-xs leading-6");
            $slotSuffix = UI::div($date)->class("hidden h-full shrink-0 sm:flex sm:flex-col sm:items-end w-120px");
            $newList = UI::card("最新动态", UI::list([
                UI::listItem(UI::div([
                    UI::p(jsExp("item.title"))->class("text-foreground text-sm font-semibold leading-6"),
                    UI::content(jsExp("item.content"))->isHtml(true, 'p')->class("text-foreground/80 *:text-primary mt-1 truncate text-xs leading-5"),
                ])->class("min-w-0 flex-auto py-2"))->slotPrefix($slotPrefix)->slotSuffix($slotSuffix)->vFor("state.newList")
            ]))->class("!mt-5");
            $block->state("navList",[
                ["color"=>"#1fdaca","icon"=>"ion:home-outline","title"=>"首页"],
                ["color"=>"#bf0c2c","icon"=>"ion:grid-outline","title"=>"仪表盘"],
                ["color"=>"#e18525","icon"=>"ion:layers-outline","title"=>"组件"],
                ["color"=>"#3fb27f","icon"=>"ion:settings-outline","title"=>"系统管理"],
                ["color"=>"#4daf1bc9","icon"=>"ion:key-outline","title"=>"权限管理"],
                ["color"=>"#00d8ff","icon"=>"ion:bar-chart-outline","title"=>"图表"],
            ]);
            $className1 = \jsExp("[
                'flex-col-center border-border group w-1/3 cursor-pointer border-b border-r border-t py-8 hover:shadow-xl',
                {
                    'border-r-0': index % 3 === 2,
                    'pb-4': index > 2,
                    'border-b-0': index < 3,
                }
            ]");
            $navList = UI::card("快捷导航", UI::flex(UI::div([
                UI::svgIcon(jsExp("item.icon"))->color(\jsExp("item.color"))->size(32)->class("transition-all duration-300 group-hover:scale-125"),
                UI::span(jsExp("item.title"))->class("text-md mt-2 truncate")
            ])->class($className1)->vFor("state.navList"))->wrap()->style("gap",0))->class("mt-5 !lg:mt-0");
            $block->state("todoList", [
                [
                    "completed"=> false,
                    "content"=> "审查最近提交到Git仓库的前端代码，确保代码质量和规范。",
                    "date"=> "2024-07-30 11:00:00",
                    "title"=> "审查前端代码提交"
                ],
                [
                    "completed"=> true,
                    "content"=> "检查并优化系统性能，降低CPU使用率。",
                    "date"=> "2024-07-30 11:00:00",
                    "title"=> "系统性能优化"
                ],
                [
                    "completed"=> false,
                    "content"=> "进行系统安全检查，确保没有安全漏洞或未授权的访问。",
                    "date"=> "2024-07-30 11:00:00",
                    "title"=> "安全检查"
                ],
                [
                    "completed"=> false,
                    "content"=> "`更新项目中的所有npm依赖包，确保使用最新版本。`",
                    "date"=> "2024-07-30 11:00:00",
                    "title"=> "更新项目依赖"
                ],
                [
                    "completed"=> false,
                    "content"=> "`修复用户报告的页面UI显示问题，确保在不同浏览器中显示一致。 `",
                    "date"=> "2024-07-30 11:00:00",
                    "title"=> "修复UI显示问题"
                ]
            ]);
            $slotPrefix1 = UI::checkbox()->vModelChecked("item.completed");
            $date = UI::span(jsExp("item.date"))->class("text-foreground/80 mt-6 text-xs leading-6");
            $slotSuffix1 = UI::div($date)->class("hidden h-full shrink-0 sm:flex sm:flex-col sm:items-end w-120px");
            $className2 = jsExp("[
                'cursor-pointer gap-x-6 py-1',
                {
                    'select-none line-through opacity-60': item.completed,
                }
            ]");
            $todoList = UI::card("待办事项",UI::list([
                UI::listItem(UI::div([
                    UI::p(jsExp("item.title"))->class("text-foreground text-sm font-semibold leading-6"),
                    UI::content(jsExp("item.content"))->isHtml(true, 'p')->class("text-foreground/80 *:text-primary mt-1 truncate text-xs leading-5"),
                ])->class($className2))->slotPrefix($slotPrefix1)->slotSuffix($slotSuffix1)->vFor("state.todoList")
            ]))->class("!mt-5");
            $options2 = [
                'legend'=>['bottom'=>'2%','left'=>'center'],
                'series'=>[
                    [
                        'animationDelay'=>'exponentialInOut',
                        'animationEasing'=>'exponentialInOut',
                        'animationType'=>'scale',
                        'avoidLabelOverlap'=>'false',
                        'color'=>['#5ab1ef', '#b6a2de', '#67e0e3', '#2ec7c9'],
                        'data'=>[
                            [ 'name'=>'搜索引擎', 'value'=>1048 ],
                            [ 'name'=>'直接访问', 'value'=>735 ],
                            [ 'name'=>'邮件营销', 'value'=>580 ],
                            [ 'name'=>'联盟广告', 'value'=>484 ],
                        ],
                        'emphasis'=>[
                            'label'=>[
                                'fontSize'=>'12','fontWeight'=>'bold','show'=>true,
                            ]
                        ],
                        'label'=>[
                            'position'=>'center','show'=>false,
                        ],
                        'labelLine'=>['show'=>false],
                        'name'=>'访问来源',
                        'radius'=>'80%',
                        'roseType'=>'radius',
                        'type'=>'pie',
                    ]
                ],
                'tooltip'=>['trigger'=>'item']
            ];
            $card2 = UI::analysisChartCard("访问来源", UI::chart($options2))->class("mt-5");

            $block->nodes([
                UI::div([
                    UI::div([
                        UI::avatar(jsExp("userInfo.avatar||state.avatar"))->size(80)->round(),
                        UI::div([
                            UI::div(jsExp("`早安,\${userInfo.realName}, 开始您一天的工作吧！`"))->class("text-md font-semibold md:text-xl"),
                            UI::div("今日晴，20℃ - 32℃！")->class("text-foreground/80 mt-1")
                        ])->class("flex flex-col justify-center md:ml-6 !md:mt-0")
                    ])->class("card-box p-4 py-6 !lg:flex"),
                    UI::div([
                        UI::div([
                            $project,
                            $newList
                        ])->class("mr-4 w-full !lg:w-3/5"),
                        UI::div([
                            $navList,
                            $todoList,
                            $card2
                        ])->class("w-full !lg:w-2/5"),
                    ])->class("mt-5 flex flex-col !lg:flex-row")
                ])->class("p-5 flex-1 w-full")
            ]);
        });
        $page = Page::make($block);
        return $this->result($page);
    }
}
